<template>
  <el-breadcrumb separator=">">
    <el-breadcrumb-item
      v-for="index in curmbList"
      :key="index.name"
      :to="{ name: index.name }"
      >{{ index.label }}</el-breadcrumb-item
    >
  </el-breadcrumb>
</template>
<script>
import { routes } from '@/router'
import { mapMutations } from 'vuex'
export default {
  data() {
    this.routesMap = new Map()
    this.initRoutesMap(routes)
    return {
      curmbList: []
    }
  },
  methods: {
    ...mapMutations(['updateCurrentPath']),
    initRoutesMap(routes) {
      routes.forEach((route) => {
        this.routesMap.set(route.name, route.label)
        if (route.children) {
          this.initRoutesMap(route.children)
        }
      })
    }
  },
  watch: {
    $route: {
      immediate: true,
      handler(route) {
        // console.log(route)
        this.updateCurrentPath(route.path)
        this.curmbList = route.matched.map((item) => {
          return {
            name: item.name,
            label: this.routesMap.get(item.name)
          }
        })
      }
    }
  }
}
</script>
<style scoped></style>
